<!-- TreeNode.vue -->
<template>
  <div>
    <button
      @click="toggle"
      class="accordion-button"
      :class="{ expanded: expanded }">
      {{ node.name }}
      <span v-if="node.children && node.children.length > 0" class="arrow-icon">◀</span>
    </button>
    <div v-if="expanded && node.children" class="accordion-content">
      <TreeNode
        v-for="child in node.children"
        :key="child.id"
        :node="child"
        :expanded="false"
        @toggle="handleChildToggle"
        @areaClicked="$emit('areaClicked', $event)"
      />
    </div>
  </div>
</template>

<script setup>
// In your TreeNode.vue component
import { defineProps, defineEmits, computed } from 'vue';
import { useAreaStore } from '@/store/area';

   const props = defineProps({
     node: Object
   });
   const emit = defineEmits(['toggle', 'areaClicked']);
   const areaStore = useAreaStore();

   const expanded = computed(() => areaStore.getExpandedNodes.includes(props.node.id));

   const toggle = () => {
     if (expanded.value) {
       areaStore.setExpandedNodes(areaStore.getExpandedNodes.filter(id => id !== props.node.id));
     } else {
       areaStore.setExpandedNodes([...areaStore.getExpandedNodes, props.node.id]);
     }
     if (!props.node.children || props.node.children.length === 0) {
       emit('areaClicked', props.node.id);
     }
     emit('toggle', props.node.id);
   };
</script>

<style scoped>
.accordion-button {
  background-color: transparent;
  color: white;
  border: none;
  padding: 10px;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.accordion-button.expanded + .accordion-content {
  display: block;
}
.arrow-icon {
  float: right;
  transition: transform 0.3s ease;
}
.expanded .arrow-icon {
  transform: rotate(270deg);
}
.accordion-content {
  padding-left: 20px;
}
</style>
